<template>
    <div>
        <head-top></head-top>
        <div class="search-div">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="订单号">
                    <el-input v-model="formInline.user" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="table-div">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="订单号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="订单金额（元）">
                </el-table-column>
                <el-table-column
                        prop="unit"
                        label="支付方式">
                </el-table-column>
                <el-table-column
                        prop="operation"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paging-div">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../../common/headTop'
    export default {
        name: "productIndex",
        data(){
            return {
                date:'',
                formInline: {
                    user: '',
                    region: ''
                },
                tableData: [{
                    name: 'A00001',
                    type: '2019-05-31',
                    price: '2',
                    unit: '微信'
                }, {
                    name: 'A00002',
                    type: '2019-05-30',
                    price: '5',
                    unit: '微信'
                }, {
                    name: 'A00003',
                    type: '2019-05-29',
                    price: '10',
                    unit: '微信'
                }, {
                    name: 'A00004',
                    type: '2019-05-28',
                    price: '8',
                    unit: '微信'
                }],
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                },
                currentPage4: 2
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        },
        components: {
            headTop,
        },
    }
</script>

<style scoped>

</style>